<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" media="screen" />
<link href="${ctx}/css/tipso.min.css" rel="stylesheet" type="text/css" media="screen" />
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
    <a href="${ctx}/trafficline/index.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${ticketQueryParam.leaveDate}&startStationsDisabled=${ticketQueryParam.startStationsDisabled}&groupId=${ticketQueryParam.groupId}">
      <div id="main-top-left">
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">选择日期</div>
  </header>

  <div id="main-top-1">
    <a href="${ctx}/trafficline/calendar.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${lastYear}-${lastMonth}-1&isRoll=1&startStationsDisabled=${ticketQueryParam.startStationsDisabled}&groupId=${ticketQueryParam.groupId}">
      <div id="main-top-1-left">
        <img src="${ctx}/images/back_btn.png" class="img-3">${lastMonth }月
      </div>
    </a>
    <div id="main-top-1-title">${year }年${month }月</div>
    <a href="${ctx}/trafficline/calendar.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${nextYear}-${nextMonth}-1&isRoll=1&startStationsDisabled=${ticketQueryParam.startStationsDisabled}&groupId=${ticketQueryParam.groupId}">
      <div id="main-top-1-right">
         ${nextMonth }月<img src="${ctx}/images/next_btn.png" class="img-3">
      </div>
    </a>
  </div>
  <div id="container-1">
    <div id="week">
      <span>周日</span>
      <span> 周一</span>
      <span> 周二 </span>
      <span> 周三</span>
      <span> 周四</span>
      <span> 周五</span>
      <span> 周六</span>
    </div>
    <div id="calendar">
      <ul>
      <c:forEach var="week" items="${calendarData }">
        <li>
        <c:forEach var="everday" items="${week }">
        <c:choose>
          <c:when test="${empty everday }">
              <div>
                <span class="c-b">${everday }</span>
              </div>
          </c:when>
          <c:otherwise>
            <c:set var="yyyyMd" value="${year}-${month}-${everday}"></c:set>
            <c:if test="${cf:compareWithCurrentDate(yyyyMd) >= 0 }">
            <a href="${ctx}/trafficline/index.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${year}-${month}-${everday}&startStationsDisabled=${ticketQueryParam.startStationsDisabled}&groupId=${ticketQueryParam.groupId}">
              <div>
                <c:if test="${everday == day }">
                <span class="c-b-select" <c:if test="${yyyyMd == today }">style="color: rgb(222, 92, 92);"</c:if> >${everday }</span>
                </c:if>
                <c:if test="${everday != day }">
                <span class="c-b" <c:if test="${yyyyMd == today }">style="color: rgb(222, 92, 92);"</c:if> >${everday }</span>
                </c:if>
              </div>
            </a>
            </c:if>
            <c:if test="${cf:compareWithCurrentDate(yyyyMd) < 0 }">
              <div>
                <span class="c-b" date-invalid="true" data-tipso="无效日期" style="color: #C0C0C0;">${everday }</span>
              </div>
            </c:if>
          </c:otherwise>
        </c:choose>
        </c:forEach>
        </li>
      </c:forEach>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <script type="text/javascript" src="${ctx}/js/tipso.min.js"></script>
  <script type="text/javascript">
    $(function() {
    	var invalidDateJqObj = $("span[date-invalid]"); // 显示无效日期的span标签
    	// 点击无效日期的span标签后显示提示，提示停留1.5秒后自动消失
    	invalidDateJqObj.tipso(
    			{useTitle: false,
    			 width: 120,
    		     background: 'tomato',
    		     onShow:function(){
    		    	 t = setTimeout(function(){
    		    		 invalidDateJqObj.tipso('hide');
    		    	 }, 1500);
    		       }
    		     });
    });
  </script>
</body>
</html>
